<template>
    <div class="continer">
        <div class="search">
            <el-form :model="search" ref="sc" @submit.native.prevent>
                <el-form-item label="" prop="space_id">
                    <el-input type="text" v-model="search.space_id" placeholder="请输入空间id"></el-input>
                </el-form-item>
                <el-form-item label="" prop="id" style="width: 210px;">
                    <el-input type="text" v-model="search.id" placeholder="请输入会议室id"></el-input>
                </el-form-item>
                <el-button type="primary" class="ml_10" @click="getList()" native-type="submit">搜索</el-button>
                <el-button @click="resetForm('sc')">重置</el-button>
            </el-form>
        </div>
        <el-table :data="tableData" style="width: 100%" stripe border>
            <el-table-column prop="id" label="id"> </el-table-column>
            <el-table-column prop="code" label="编码"> </el-table-column>
            <el-table-column prop="space.name" label="空间名称"> </el-table-column>
            <el-table-column prop="type" label="空间类型"> </el-table-column>
            <el-table-column prop="area" label="空间面积"> </el-table-column>
            <el-table-column prop="people_num" label="可容纳人数"> </el-table-column>
            <el-table-column prop="status" label="状态"> </el-table-column>
            <el-table-column prop="note" label="备注"> </el-table-column>
            <el-table-column label="操作" width="210px">
                <template slot-scope="scope">
                    <el-button v-for="(item, index) in caozuoList" :key="index" type="text" size="mini" @click="caozuo(scope.row, index)">{{item}}</el-button>
                    <el-button v-if="scope.row.status == '正在申请'" type="text" size="mini" @click="shenheClick(scope.row)">审核列表</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 审核列表 -->
        <el-dialog title="审核列表" :visible.sync="shenheListFlag" width="85%">
            <el-table :data="shenheListData" style="width: 100%" stripe border>
                <el-table-column prop="id" label="id"> </el-table-column>
                <el-table-column prop="start_time" label="使用日期"> </el-table-column>
                <el-table-column prop="time_zone" label="使用时间"> </el-table-column>
                <el-table-column prop="zhuti" label="主题"> </el-table-column>
                <el-table-column prop="person" label="预订人姓名"> </el-table-column>
                <el-table-column prop="number" label="人数"> </el-table-column>
                <!-- <el-table-column prop="status" label="审核状态"> </el-table-column> -->
                <el-table-column label="审核状态" width="210px">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status == 0">正在申请</div>
                        <div v-if="scope.row.status == 1">审核通过</div>
                        <div v-if="scope.row.status == 2">审核不通过</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="210px">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.status == 0" type="text" size="mini" @click="shenheListClick(scope.row)">审核</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- 表单——编辑 -->
        <el-dialog title="编辑" :visible.sync="showForm" width="1100px">
            <el-form
                :model="spaceListObj"
                label-position="right"
                :rules="formRules"
                ref="spaceList"
                label-width="170px"
                style="width: 85%; margin: 0 auto;"
            >
                <el-form-item label="工位房间会议室编号：" prop="code">
                    <el-input type="text" v-model="spaceListObj.code" placeholder="请输入工位房间会议室编号"></el-input>
                </el-form-item>
                <el-form-item label="可容纳人数：" prop="people_num">
                    <el-input type="text" v-model="spaceListObj.people_num" placeholder="请输入可容纳人数"></el-input>
                </el-form-item>
                <el-form-item label="面积：" prop="area">
                    <el-input type="text" v-model="spaceListObj.area" placeholder="请输入面积"></el-input>
                </el-form-item>
                <el-form-item label="状态：" prop="status">
                    <el-radio-group v-model="spaceListObj.status">
                        <el-radio :label="1">闲置</el-radio>
                        <el-radio :label="2">已占用</el-radio>
                        <el-radio :label="3">正在申请</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注: " prop="note">
                    <el-input type="textarea" rows="3" v-model="spaceListObj.note" placeholder="请输入备注"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showForm = false">取 消</el-button>
                <el-button type="primary" @click="edit">修 改</el-button>
            </div>
        </el-dialog>
        <!-- 审核申请 -->
        <el-dialog title="审核" :visible.sync="shenhe" width="1100px">
            <el-form
                :model="shenheList"
                label-position="right"
                label-width="170px"
                style="width: 85%; margin: 0 auto;"
            >
                <!-- <el-form-item label="公司名称：" prop="">
                    <el-input type="text" v-model="shenheList.company_name" :disabled="true" placeholder="请输入公司名称"></el-input>
                </el-form-item>
                <el-form-item label="开始时间：" prop="">
                    <el-date-picker
                      v-model="shenheList.start_time"
                      type="date"
                      placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间：" prop="">
                    <el-date-picker
                      v-model="shenheList.end_time"
                      type="date"
                      placeholder="选择日期">
                    </el-date-picker>
                </el-form-item> -->
                <el-form-item label="申请地址：" prop="">
                    <el-input type="text" v-model="shenheList.room_id" :disabled="true" placeholder="请输入申请地址"></el-input>
                </el-form-item>
                <el-form-item label="状态：" prop="status">
                    <el-radio-group v-model="shenheList.status">
                        <el-radio :label="0">正在申请</el-radio>
                        <el-radio :label="1">通过申请</el-radio>
                        <el-radio :label="2">不通过申请</el-radio>
                      </el-radio-group>
                </el-form-item>
            </el-form>
            <el-form
                :model="shenheObj"
                label-position="right"
                :rules="shenheRules"
                label-width="170px"
                style="width: 85%; margin: 0 auto;"
            >
                <el-form-item label="回复内容：" prop="reply">
                    <el-input type="text" v-model="shenheObj.reply" placeholder="请输入回复内容"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="shenhe = false">取 消</el-button>
                <el-button type="primary" @click="tijiaoShenhe">提 交</el-button>
            </div>
        </el-dialog>
        <!-- 日志 -->
        <el-dialog title="日志" :visible.sync="log" width="1100px">
            <div style="width: 80%; margin: 0 auto; overflow: hidden; padding-bottom: 40px;">
                <el-table :data="logList" style="width: 100%" stripe border>
                    <el-table-column prop="create_time" label="创建时间"> </el-table-column>
                    <el-table-column prop="action" label="日志"> </el-table-column>
                </el-table>
            </div>
            <el-pagination
                background
                layout="prev, pager, next, jumper"
                :page-size="logLimit"
                :total="logListLen"
                :current-page.sync="logCurrentPage"
                @current-change="logToPage"
                class="txt_r mt_20"
            ></el-pagination>
        </el-dialog>
        <!-- 分页 -->
        <el-pagination
            background
            layout="prev, pager, next, jumper"
            :page-size="limit"
            :total="listLen"
            :current-page.sync="currentPage"
            @current-change="toPage"
            class="txt_r mt_20"
        ></el-pagination>
    </div>
</template>

<script>
	import { getSpaceRoom, editSpaceRoom, delSpaceRoom, getApplyInfo, editApplyInfo, getLog, getapplydetail } from "../../../api/spaceManagement/index.js";

    export default {
        name: "spaceList",
        data() {
            return {
                tableData: [],
                search: {
                    space_id: "",
                    id: "",
                    page: ''
                },
                spaceType: [
                    {value:"1", label:"工位"},
                    {value:"2", label:"房间"},
                    {value:"3", label:"会议室"}
                ],
                caozuoList: ["详情", "修改", "删除", "日志"],
                spaceListObj: {
                    id: null,
                    code: null,
                    people_num: null,
                    area: null,
                    status: null,
                    note: null
                },
                showForm: false,
                formRules: {
                    code: [{required: true,message: "请输入工位房间会议室编号",trigger: "blur"}],
                    people_num: [{required: true,message: "请输入可容纳人数",trigger: "blur"}],
                    area: [{required: true,message: "请输入面积",trigger: "blur"}],
                    status: [{required: true,message: "请输入状态",trigger: "blur"}],
                },
                // 分页
                limit: 30,
                listLen: 0,
                currentPage: 1,
                // 审核
                shenhe: false,
                shenheObj: {
                    id: '',
                    status: 0,
                    reply: ''
                },
                shenheRules: {
                    status: [{required: true,message: "请选择回复状态",trigger: "blur"}],
                },
                shenheList: {},
                // 日志
                log: false,
                logList: [],
                logLimit: 30,
                logListLen: 0,
                logCurrentPage: 1,
                roomId: '',
                // 会议室审核列表
                shenheListFlag: false,
                shenheListData: []
            };
        },
        methods: {
			// 获取列表信息
			getList(page = 1){
                let spaceId = window.localStorage.getItem("spaceId");
                if(spaceId){
                    this.search.space_id = spaceId;
                    window.localStorage.setItem("spaceId", "");
                }
				getSpaceRoom({
                    ...this.search,
                    page: page,
                    type: 3
                }).then((response) => {
                    if(response.code == 0){
                        this.tableData = response.data.list;
                        this.listLen = response.data.total;
                    }else{
                        this.$message.error(response.message);
                    }
				}).catch(() => {
					this.$message.error("列表数据获取失败");
				})
			},
            // 获取日志列表
            getLog(page = 1){
                getLog({
                    room_id: this.roomId,
                    page: page,
                }).then((response) => {
                    if(response.code == 0){
                        console.log(response.data)
                        this.logList = response.data.list;
                        this.logListLen = response.data.total;
                    }else{
                        this.$message.error(response.message);
                    }
                }).catch(() => {
                    this.$message.error("获取数据失败");
                })
            },
            // 重置搜索框
            resetForm(name){
                this.$refs[name].resetFields();
            },
            // 列表操作
            caozuo(row, num){
                if(num == 0){ // 详情
                    this.$router.push({ path: '/spaceManagement/spaceListDetail' });
                    window.localStorage.setItem("spaceList", JSON.stringify(row));
                }else if(num == 1){ // 编辑
                    this.showForm = true;
                    this.spaceListObj.id = row.id;
                    this.spaceListObj.code = row.code;
                    this.spaceListObj.people_num = row.people_num;
                    this.spaceListObj.area = row.area;
                    if(row.status == "闲置"){
                        this.spaceListObj.status = 1;
                    }else if(row.status == '已占用'){
                        this.spaceListObj.status = 2;
                    }else if(row.status == '正在申请'){
                        this.spaceListObj.status = 3;
                    }
                    this.spaceListObj.note = row.note;
                }else if(num == 2){ // 删除
                    this.$confirm("确定删除该工位、房间或会议室吗", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }).then((response)=>{
                        delSpaceRoom({id:row.id}).then((data)=>{
                            if(data.code){
                                this.$message.error(data.message);
                                return;
                            }
                            this.$message.success("删除成功");
                            this.getList(this.currentPage);
                        }).catch((error)=>{
                            this.$message.error("删除失败");
                        })
                    }).catch(()=>{
                        this.$message.info("取消删除");
                    });
                }else if(num == 3){
                    this.log = true;
                    this.roomId = row.id;
                    this.getLog(1);
                }
            },
            shenheClick(row){ // 点击 弹出 审核列表
                this.shenheListFlag = true;
                getapplydetail({
                    room_id: row.id
                }).then((response) => {
                    if(response.code == 0){
                        this.shenheListData = response.data;
                    }else{
                        this.$message.error(response.message);
                    }
                })
            },
            shenheListClick(row){ // 审核列表 审核
                this.shenheList = row;
                this.shenhe = true;
                this.shenheObj.id = row.id;
            },
            // 修改
            edit(){
                this.$refs['spaceList'].validate((valid) => {
                    if (!valid) {return false;}
                    editSpaceRoom(this.spaceListObj).then((data)=>{
                        if(data.code){
                            this.$message.error(data.message);
                            return false;
                        }
                        this.$message.success("修改成功");
                        this.showForm = false;
                        this.getList(this.currentPage);
                    }).catch((error)=>{
                        this.$message.error("修改失败");
                    })
                });
            },
            // 分页
            toPage(val){
                this.currentPage = val;
                this.getList(val);
            },
            // 日志分页
            logToPage(val){
                this.logCurrentPage = val;
                this.getLog(val);
            },
            getDate(time){
                if(time.length < 42){
                    return time;
                }else{
                    let myDate = time;
                    let tYear = myDate.getFullYear().toString();
                    let tMonth = myDate.getMonth() + 1;
                    let tdate = myDate.getDate();
                    if(tMonth < 10){
                        tMonth = '0' + tMonth;
                    }else{
                        tMonth = tMonth;
                    }
                    if(tdate < 10){
                        tdate = '0' + tdate;
                    }else{
                        tdate = tdate;
                    }
                    return tYear + '-' + tMonth + '-' + tdate;
                }
            },
            // 提交审核结果
            tijiaoShenhe(){
                this.shenheObj.status = this.shenheList.status;
                this.shenheList.start_time = this.getDate(this.shenheList.start_time);
                this.shenheList.end_time = this.getDate(this.shenheList.end_time);
                editApplyInfo({
                    ...this.shenheObj,
                    start_time: this.shenheList.start_time,
                    end_time: this.shenheList.end_time
                }).then((response) => {
                    if(response.code == 0){
                        this.shenhe = false;
                        this.getList(this.currentPage);
                        this.$message.success("提交成功");
                    }else{
                        this.$message.error(response.message);
                    }
                }).catch(() => {
                    this.$message.info("提交失败");
                })
            },
        },
        created() {
			this.getList();
        }
    };
</script>

<style scoped>
.search{float: right;}
.search .el-form-item{margin-bottom: 20px; display: inline-block; margin-right: 15px;}
.txt_r {text-align: right;}
</style>
